<template>
    <div class="page">
        <h1 style="color: #ffffffd2;">学校信息管理系统</h1>
        <div style="position: relative;left: 20em;top: -4em;color: #ffffffd2;">
            <el-dropdown>
                <el-button type="info" size="mini">
                    <img width="50px" :src="`http://127.0.0.1:9000${userInfo.userhead}`" alt="" srcset=""><br>
                    {{ userInfo.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu   slot="dropdown">
                    <el-dropdown-item><div @click="logout">退出登录</div></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div style="">
            <el-row class="tac">
                <el-col :span="5">
                    <!-- <h5>自定义颜色</h5> -->
                    <el-menu default-active="1-1" class="el-menu-vertical-demo" :style="`width:${wwidth}px`"
                        @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff"
                        active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>个人信息</span>
                            </template>
                            <el-menu-item index="1-1" @click="changeView('1-1')">个人信息</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>学科信息</span>
                            </template>
                            <el-menu-item index="2-1" @click="changeView('2-1')">成绩查询</el-menu-item>
                            <el-menu-item index="2-2" @click="changeView('2-2')">添加成绩</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
                <el-col :span="18" style="background-color: #fff;min-height: 40em;">
                    <div style="margin: 5em;">
                        <infomation style="margin-left: 10em;" v-show="view === '1-1'"></infomation>
                        <subject style="margin-left: 10em;" v-show="view === '2-1'"></subject>
                        <addsub @update="changeView('2-1')" style="margin-left: 10em;" v-show="view === '2-2'"></addsub>
                    </div>
                </el-col>
            </el-row>
            <div style="height: 5em;"></div>
        </div>
    </div>
</template>

<script>
import subject from '../../componens/subject.vue'
import addsub from '../../componens/addsub.vue'
import infomation from '../../componens/infomation.vue'
export default {
    name: 'homeCom',
    components: { subject, addsub, infomation },
    data() {
        return {
            isCollapse: true,
            wheight: '20em;',
            wwidth: '10em;',
            view: '1-1',
            userInfo: {}
        };
    },
    mounted() {
        this.userInfo = this.$store.state.login.userInfo
        console.log(this.userInfo, 'this.userInfo');
        this.wheight = (window.screen.availHeight * 0.7)
        this.wwidth = (window.screen.availWidth * 0.14)
        console.log(window.screen.availHeight, this.wheight);
        console.log(window.screen.availWidth, this.wwidth);
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        changeView(val) {
            console.log(val);
            this.view = val
        },
        logout() {
            console.log('cdasdasdsad');
            this.$router.replace({
                path: '/login'
            })
        }
    }
}
</script>

<style scoped>
.page {
    background-color: rgb(84, 92, 100);
    margin: 0px;
    padding: 2%;
}

.el-dropdown {
    vertical-align: top;
}

.el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}</style>